<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Online Stationery store</title>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="styles/validationEngine.jquery.css"/>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link href="scripts/sources/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
<script src="scripts/sources/jquery.fancybox.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script type="text/javascript" src="scripts/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="scripts/jquery.validationEngine.js"></script>
<script type="text/javascript" src="scripts/jsrender.js"></script>
<script type="text/javascript" src="scripts/jshashtable-2.1.js"></script>
<script type="text/javascript" src="scripts/jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="scripts/basket.js"></script>
<script id="productBusketTemplate" type="text/x-jsrender">
		<li id="productID_{{>productId}}"><a href="no-js.htm" onClick="return false;"><img title="productBusket_{{>id.id}}" src="images/delete.png" id="deleteProductID_{{>productId}}"></a> {{>name}} ({{>numInStock}}) - <span class="productPrice">{{:~previewCurrency(price)}}</span></li>
</script>
<script id="productTemplate" type="text/x-jsrender">
<div class="productWrap" id="ProductId_{{>id.id}}">
	<div class="productImageWrap">
		<img src="{{>imagePath}}" alt="{{>name}}" />
	</div>
	<div id="name_{{>id}}" class="productNameWrap">{{>name}}</div>
	<div class="productPriceWrap">
		<div id="price_{{>id}}" class="productPriceWrapLeft">{{:~previewCurrency(price)}}</div>
		<div style="{{:~checkUser()}}" class="productPriceWrapRight">
			<a href="no-js.htm" onClick="return false;">
				<img src="images/add-to-basket.gif" alt="Add To Basket" width="111" height="32" id="featured_{{>id.id}}" />
			</a>
		</div>	
	</div>
</div>
</script>
<script type="text/javascript">
	var $OnlineStore = {};
	
	$OnlineStore.previewCurrency = function (value) {
	    return $.formatNumber(value, { format: "#,##0.#0", locale:"th" }) + " THB";
	}
	
	$OnlineStore.param = function(name,value){
		this.name=name;
		this.value=value;
	}
	
	function Reset(){
		$("#tbEmail").val("");
		$("#tbPassword").val("");
		$("#trErrorLogin").hide();
		$("#trErrorValidate").hide();
	}
	
	function ShowLoggedIn(){
		$("#loggedIn").hide();
		$("#username").html("Hi, "+$OnlineStore.customer.firstName+" "+$OnlineStore.customer.lastName);
		$(".productPriceWrapRight").show();
		$("#logout").show();
		$("#slidingTopFooterLeft").show();
		$("#trErrorValidate").hide();
		$("#trErrorLogin").hide();
		$("#txtSignin").hide('slow');
	}
	
	function ShowConfirmLink(){
		$("#confirm").attr('href',"Summary.html?email="+$OnlineStore.customer.email);
	}
	
	function ReloadBusket(){
		$("#slidingTopContent").slideToggle("slow", function(){																		 
			$("#slidingTopFooterLeft").html('<img src="images/arrow-up.png" alt="Hide Basket" /> <a href="aaa.htm" onclick="return false;" id="slidingTopTrigger">Hide Basket</a>');
			$.getJSON("/Product?tbEmail="+$OnlineStore.customer.email+"&action=getsummary", function(jsonData){
				console.log(JSON.stringify(jsonData))
				$OnlineStore.productsInBusket = jsonData;
				if ($OnlineStore.productsInBusket.length != 0){
					$("#spanConfirm").show("slow");
					$("#confirm").show("slow");
					$("#basketItemsWrap li:first").before($("#productBusketTemplate").render($OnlineStore.productsInBusket));
				}
			});
			$("#slidingTopTrigger").fadeTo(4000, 1, function(){
				$("#slidingTopContent").hide("slow");
			});
		});		
	}
	
	function Login(){
		var email = $("#tbEmail").val();
		var password = $("#tbPassword").val();
		if(email&&password){
			$.getJSON("/Customer?tbEmail="+email+"&tbPassword="+password, function(jsonData){
				console.log(JSON.stringify(jsonData));
				if(jsonData){
					$OnlineStore.customer = jsonData;
					ShowLoggedIn();
					ShowConfirmLink();
					$.fancybox.close();
					ReloadBusket();
				}
				else{
					$("#trErrorLogin").show();
					$("#trErrorValidate").hide();
				}
			});
		}
		else{
			$("#trErrorValidate").show();
			$("#trErrorLogin").hide();
		}
	}
	
	function getCookie(c_name)
	{
		if (document.cookie.length>0)
		  {
		  c_start=document.cookie.indexOf(c_name + "=");
		  if (c_start!=-1)
		    {
		    c_start=c_start + c_name.length+1;
		    c_end=document.cookie.indexOf(";",c_start);
		    if (c_end==-1) c_end=document.cookie.length;
		    return unescape(document.cookie.substring(c_start,c_end));
		    }
		  }
		return "";
	}
	
	function SignOut(){
		$OnlineStore.customer=null;
		date = new Date();
		  date.setDate(date.getDate() -1);
		  document.cookie = 'User=;expires=' + date;
		$("#loggedIn").show("slow");
		$("#logout").hide("slow");
		$("#slidingTopContent").hide("slow");
		$("#slidingTopFooterLeft").hide("slow");
		$(".productPriceWrapRight").hide();
		$("#txtSignin").show("slow");
		
		$("#contentWrapLeft").html($("#productTemplate").render($OnlineStore.products));
	}
	
	
	$(function() {
		$('.fancybox').fancybox({
            width: 560,
            height: 560,
            scrolling: 'no',
            helpers: {
                title: null
            }
        });
		
		
		$('#members').fancybox({
            width: 560,
            height: 560,
            scrolling: 'no',
            helpers: {
                title: null
            }
        });
		
		$('#members').trigger('click')	
		var info = getCookie("User");
		if(info){
			$OnlineStore.customer = JSON.parse(JSON.parse(info));
			ReloadBusket();
			ShowLoggedIn();	
			ShowConfirmLink();
			$("#contentWrapLeft").html($("#productTemplate").render($OnlineStore.products));
		}	
		
		$.getJSON("/Product?action=getproduct", function(jsonData){
			console.log(JSON.stringify(jsonData))
			$OnlineStore.products = jsonData;
			$("#contentWrapLeft").html($("#productTemplate").render($OnlineStore.products));
		});
	});
	
	$.views.helpers({
		previewCurrency : function (value) {
		    return $.formatNumber(value, { format: "#,##0.##", locale:"th" }) + " THB";
		},
		checkUser : function () {
			if(!$OnlineStore.customer)
		    	return "display:none";
			else
				return "";
		}
	});
	
</script>
</head>
<body>
<form id="form" action="/Customer" method="GET">
<div id="mainWrap">
	<div id="slidingTopWrap">
		<div id="slidingTopContent">
			<div id="basketWrap">
				<div id="basketTitleWrap" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
					Your Basket <span id="notificationsLoader"></span><span id="spanConfirm" style="display:none">  | </span><a href="#" id="confirm" style="display:none;color:black; text-decoration:underline">Confirm</a>
				</div>
				<div id="basketItemsWrap">
					<ul>
					<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="slidingTopFooter">
			<div id="txtSignin" style="padding-top:15px; text-align:center">
				Please sign in to see your basket
			</div>
			<div id="slidingTopFooterLeft" style="display:none">
				<img src="images/arrow-down.png" alt="Show Basket" /> <a href="no-js.htm" onclick="return false;" id="slidingTopTrigger">Show Basket</a>
			</div>
		</div>
	</div>
	
	<div id="header" class="ui-corner-all ui-helper-clearfix">
	<div id="loggedIn">
		<span id="headersignin"><a class="fancybox" href="#login">Sign In</a></span><span> | </span><span id="headersignup"><a class="fancybox fancybox.iframe" href="Register.html">Sign Up</a></span><br/>
	</div>
	<div id="logout" style="display:none">
		<span id="username">User</span><span> | </span><span id="headersignout"><a href="#" onclick="SignOut();">Sign Out</a></span><br/>
	</div>
	<span id="headertitle">Stationery store</span>
	</div>
	
	<div id="contentWrap">	
		<div id="contentWrapLeft">
		</div>
	</div>
</div>
	<div id="login" style="width: auto; display:none">
        <table width="320" style="padding-bottom: 30px; padding-top: 30px; padding-left: 10px;"
            border="0" cellspacing="0" cellpadding="0" align="center">
            <tr>
                <td align="center" class="TextBlack12">
                    <b>Online Stationery Store</b>
                </td>
            </tr>
            <tr>
                <td>
                    <br>
                    <fieldset class="TextBlack12" />
                    <legend class="TextBlack12"><b>Login</b></legend>
                    <table width="400px" border="0" cellspacing="3" cellpadding="3" align="center">
                        <tr>
                            <td style="text-align: right" class="TextBlack12">
                                E-mail
                            </td>
                            <td>
                                <input type="text" name="tbEmail" id="tbEmail" title="Email address" maxlength="150" size="40" class="validate[required],custom[email]] textBlack12"/>
                                <label  class="asteric">*</label>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align: right" class="TextBlack12">
                                Password
                            </td>
                            <td>
                                <input type="password" name="tbPassword" id="tbPassword" title="Password is required" maxlength="150" size="40" class="validate[required] textBlack12"/>
                                <label  class="asteric">*</label>
                            </td>
                        </tr>
                        <tr align="center" >
                            <td align="center" colspan="2">
                                <input type="button" value="Submit" onclick="Login();"/>
                                <input type="button" onclick="Reset();" value="Reset"/>
                            </td>
                        </tr>
                        <tr id="trErrorLogin" style="display:none" align="center" >
                            <td align="center" colspan="2">
                                <label  class="asteric">Your account doesn't exist! Please try again.</label><br/>
                            </td>
                        </tr>
                        <tr id="trErrorValidate" style="display:none" align="center" >
                            <td align="center" colspan="2">
                                <label  class="asteric">Please enter all required fields!</label><br/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    
    <div id="members" class="fancybox" style="display:none">
    <center>
	    <h2>INT 678 Cloud Computing Workshoping</h2>
	    <h3>Team Members</h3>
    </center>
    
    <table style="width:100%">
	    <tr>
	    	<td>Thanyaporn </td>
		    <td>Phettun</td>
		    <td>54441322</td>
	    </tr>
	    <tr>
	    	<td>Teerawut </td>
		    <td>Songserm</td>
		    <td>54441323</td>
	    </tr>
	    <tr>
	    	<td>Pornchai </td>
		    <td>Kusonpalalert</td>
		    <td>54441327</td>
	    </tr>
    </table>
    </div>
    </form>
</body>
</html>